<template>
	<view class="table-box" :style="{border,borderRadius:radius}">
		<view class="tab-head-box"
			:style="{gridTemplateColumns:`repeat(${len},1fr)`,fontSize:headFont,color:headColor}">
			<view class="tab-head" v-for="(item,i) in tabHeadList" :key="i" :style="{padding}">
				{{item}}
			</view>
		</view>
		<view class="tab-body" :style="{gridTemplateColumns:`repeat(${len},1fr)`,fontSize:bodyFont}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		provide() {
			return {
				tableData: this
			}
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			radius: {
				type: String,
				default: '24rpx'
			},
			border: {
				type: String,
				default: '2px solid #F8F8F8;'
			},
			padding: {
				type: String,
				default: '16rpx'
			},
			height:{
				type:String,
				default:'66rpx'
			},
			headColor: {
				type: String,
				default: '#999'
			},
			headFont: {
				type: String,
				default: '24rpx'
			},
			bodyFont: {
				type: String,
				default: '24rpx'
			},
			stripe: {
				type: Boolean,
				default:true
			},
		},
		data() {
			return {
				tabHeadList: [],
				len: 0
			}
		},
		watch: {
			'$children': {
				handler(n) {
					this.$nextTick(() => {
						this.tabHeadList = this.$children.map(v => {
							return v.label
						})
						this.len = this.tabHeadList.length
					})
				},
				immediate: true,
				deep: true
			}
		},
	}
</script>

<style lang="less" scoped>
	.table-box {
		overflow: hidden;

		.tab-head-box {
			display: grid;
			background: #F8F8F8;

			.tab-head {
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 2px solid #F8F8F8;
			}

			.tab-head:nth-last-child(1) {
				border-right: none;
			}
		}

		.tab-body {
			display: grid;
		}
	}

	/deep/ gg-column {
		border-top: 2rpx solid #F8F8F8;
		border-right: 2rpx solid #F8F8F8;
	}

	/deep/ gg-column:nth-last-child(1) {
		border-right: none;
	}
</style>
